import React from 'react';
import { connect } from 'dva';
import { Tree, Button, Table, Form, Input, Select, Popconfirm, DatePicker, Row, Col  } from 'antd';
import AlarmModal from '../../components/alarm/AlarmModal';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;

function Alarm({ dispatch, alarm, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;

    const columns = [{
        title: '报警类型',
        dataIndex: 'type',
        key: 'type',
        width: 120,
    },{
        title: '报警机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
    }
    ,{
        title: '报警机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 100,
    },{
        title: '资产序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 100,
    }
    , {
        title: '报警内容',
        dataIndex: 'desc',
        key: 'desc',
        width: 250,
    }, {
        title: '报警时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
    }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        render: (text, record) => {
            if (record.status == 1) {
                return '未处理';
            };
            if (record.status == 2) {
                return '已处理';
            };
        },
    }, {
        title: '处理人',
        dataIndex: 'handler',
        key: 'handler',
        width: 100,
    }, {
        title: '处理时间',
        dataIndex: 'handleTime',
        key: 'handleTime',
        width: 120,

    }, {
        title: '操作',
        key: 'operation',
        width: 60,
        render: (text, record) => {
            if (record.status == 1) {
                    return <span><a onClick={onHandle.bind(null, record.id_)}>处理</a></span>;
            };
            if (record.status == 2) {
                    return <span><a onClick={onView.bind(null, record.id_)}>查看结果</a></span>;
            };
        },
    }];

    const pagination = {
        current:alarm.current,
        pageSize:alarm.currentSize,
        total: alarm.total,
        showSizeChanger: true,
        showTotal: (total => '共' + alarm.total + '条'),
        onShowSizeChange(current, size) {
        dispatch({
            type: 'alarm/qryAlarmByParams',
            payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
        });
        },
        onChange(current) {
        dispatch({
            type: 'alarm/qryAlarmByParams',
            payload:{ ...getFieldsValue(),...{'pageNum': current, 'pageSize':alarm.currentSize} }
        });
        },
    };

    function handleClear(){
      form.resetFields();
    }
    const submitHandle = () => {
        dispatch({
            type: 'alarm/qryAlarmByParams',
            payload: { ...getFieldsValue()},
        });
    }

    const onHandle = (record) => {
        dispatch({
            type: 'alarm/handleById',
            payload: record
        })
    }

    const onView = (record) => {
        dispatch({
            type: 'alarm/viewById',
            payload: record,
        })
    }

    const loopType = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    const modalProps = {
        item: alarm.currentItem,
        visible: alarm.modalVisible,
        title: "处理结果",
        newKey : alarm.newKey,
        type : alarm.modalType,
        onOk (data) {
          dispatch({
            type: `alarm/${alarm.modalType}`,
            payload: data,
            search:{...getFieldsValue(),...{'pageNum':alarm.current, 'pageSize':alarm.currentSize}}
          })
        },
        onCancel () {
          dispatch({
            type: 'alarm/hideModal',
          })
        },
    }

    const formItemLayout = {
        wrapperCol: { className: 'wrapper-col' },
    }

    return (
        <div style={{backgroundColor:'#fff'}}>
            <div style={{minHeight:'100%'}}>
            <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
                <Form layout="inline" style={{width:'100%'}}>
                 <Row gutter={16}>
                    <Col span={4}>
                        <FormItem  style={{ width: '100%' }} {...formItemLayout} >
                            {getFieldDecorator('typeId')(
                                <Select
                                    style={{ width: '100%' }}
                                    placeholder="报警类型"
                                >
                                    <Option value="">全部</Option>
                                    {loopType(alarm.typeList)}
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={4}>
                        <FormItem  style={{ width: '100%' }} {...formItemLayout} >
                            {getFieldDecorator('serialNo')(<Input  placeholder="请输入SN号模糊查找" style={{ width: '100%' }} />)}
                        </FormItem>
                    </Col>
                    <Col span={4}>
                        <FormItem  style={{ width: '100%' }} {...formItemLayout} >
                            {getFieldDecorator('desc')(<Input  placeholder="请输入告警内容模糊查找" style={{ width: '100%' }} />)}
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem  style={{ width: '100%' }} {...formItemLayout}>
                          {getFieldDecorator('createTime')( <RangePicker/>)}
                        </FormItem>
                    </Col>
                    <Col span={3}>
                        <FormItem  style={{ width: '100%' }} {...formItemLayout} >
                        {getFieldDecorator('status')(
                            <Select  placeholder="状态">
                                <Option value="">全部</Option>
                                <Option value="1">未处理</Option>
                                <Option value="2">已处理</Option>
                            </Select>
                        )}
                        </FormItem>
                    </Col>
                    <Col span={4} style={{ textAlign:'right',paddingRight:0}}>
                        <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                        </FormItem>
                        <FormItem>
                            <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                        </FormItem>
                    </Col>
                    </Row>
                    
                </Form>
                </div>
                <div style={{width:'100%',padding:"30px 20px",}}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={alarm.alarmList} pagination={pagination}
                    />
                </div>
            </div>
            <AlarmModal {...modalProps} />
        </div>
    );

}

function mapStateToProps(state) {
  return { alarm : state.alarm,loading:state.loading.models.alarm};
}

Alarm = Form.create()(Alarm);

export default connect(mapStateToProps)(Alarm);
